{extend name="public/layerbase" /}
{block name="css"}
    <style>
        .jscolor{
            border: 1px solid #ddd;
        }
    </style>

{/block}

{block name="content"}

    <div class="main-container" id="main-container">
        <div class="main-content">
            <div class="page-content">

                <div class="page-content-area">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="widget-box">
                                <div class="widget-header widget-header-blue widget-header-flat">
                                    <h4 class="widget-title lighter">新增设置</h4>
                                </div>
                                <div class="widget-body">
                                    <div class="widget-main">
                                        <div class="step-content pos-rel" >
                                            <div class="step-pane active" >
                                                <form class="form-horizontal " id="form" method="post">
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right" > 设置名称：</label>
                                                        <div class="col-sm-9">
                                                            <div class="clearfix">
                                                                <input type="text" name="option_name" placeholder="输入设置" class="form-control" value=""/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right" > 设置标识：</label>
                                                        <div class="col-sm-9">
                                                            <div class="clearfix">
                                                                <input type="text" name="option_remark" placeholder="输入标识" class="form-control" value=""/>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label no-padding-right" > 排序：</label>
                                                        <div class="col-sm-9">
                                                            <div class="clearfix">
                                                                <input name="sort" class="form-control" value="50">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="form-group" id="a">
                                                        <label class="col-sm-3 control-label no-padding-right" > 状态：</label>
                                                        <div class="col-sm-9">
                                                            <div class="clearfix">
                                                                <label class="radio-inline"><input type="radio" name="status" value="1" checked>启用</label>
                                                                <label class="radio-inline"><input type="radio" name="status" value="0" >禁用</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <hr />
                                                    <div class="clearfix" style="text-align: center">
                                                        <div class="col-md-offset-3 col-md-9">
                                                            <button class="btn btn-info" type="submit" id="submit">
                                                                <i class="ace-icon fa fa-check bigger-110"></i>
                                                                提交
                                                            </button>

                                                            &nbsp; &nbsp; &nbsp;
                                                            <button class="btn" type="reset">
                                                                <i class="ace-icon fa fa-undo bigger-110"></i>
                                                                重置
                                                            </button>

                                                            &nbsp; &nbsp; &nbsp;
                                                            <button class="btn btn-danger" type="button" id="add">
                                                                <i class="ace-icon fa fa-pencil bigger-110"></i>
                                                                新增设置
                                                            </button>

                                                            &nbsp; &nbsp; &nbsp;
                                                            <button class="btn btn-danger" type="button" id="reduce">
                                                                <i class="ace-icon fa fa-pencil bigger-110"></i>
                                                                删除
                                                            </button>
                                                        </div>
                                                    </div>
                                                </form>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="copy" style="display: none">
    <div class="form-group add">
        <label class="col-sm-3 control-label no-padding-right" > 描述：</label>
        <div class="col-sm-9">
            <div class="clearfix">
                <input name="dec"  class="form-control" value="">
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
    <script>
    $(function () {
        var add = $('#add');
        var reduce = $('#reduce');
        add.click(function () {
            layer.prompt(function(val, index){
                    $('#copy').find("label").html(val)
                    $('#copy').find("input").attr('name','options['+val+']')
                    layer.close(index);
                    var child =$('#copy').html();
                    $('#a').before(child);
            });

        });
        reduce.click(function () {
            $('.form-horizontal .add').last().remove();
        });
    });

        var define_fileds =  {
            option_name: {
                validators: {
                    notEmpty: {
                        message: '设置不能为空'
                    },
                }
            },
            option_remark: {
                validators: {
                    notEmpty: {
                        message: '标识不能为空'
                    },
                }
            },
            status: {
                validators: {
                    notEmpty: {
                        message: '状态必选'
                    },
                }
            },
        };
        var ajaxurl = "{:url('add')}";
    </script>


{/block}